<template>
  <div class="recommend">
    <div class="recommend-items">
      <h3 class="today-recommend">今日推荐</h3>
      <div class="items-warp">
        <div
          class="item-self"
          v-for="(item,index) in items"
          @click.stop="clickItem(item.id,index)"
          :key="item.id"
        >
          <img :src="item.pic" alt="">
          <p class="name">{{ item.name }}</p>
          <div class="price">
            <div>
              <span class="current-price">{{ item.originalPrice | currency }} </span>
              <span class="original-price">{{ item.minPrice | currency }}</span>
            </div>
            <van-icon @click.stop="addCart(item)" color="red" name="add-o" />
          </div>
        </div>
       </div>
    </div>
  </div>
</template>

<script>
import { currency } from 'utils/filters'
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    addCart (item) {
      this.$emit('clickAdd', item)
    },
    clickItem (itemId, index) {
      this.$emit('clickItem', { itemId, index })
    }
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
.recommend{
  .today-recommend{
    padding-left: 15px;
  }
  .items-warp{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
    .item-self{
      font-size: 18px;
      width: 50%;
      vertical-align: top;
      .name{
        padding: 0 10px;
        font-size: 16px;
        // 以下6行代码作用：显示2行文本，多出省略号代替
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price{
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
        .current-price{
          color: cyan;
        }
        .original-price{
          color: #aaa;
          margin-right: 2px;
        }
      }
      img{
        width: 90%;
        height: 180px;
      }
      img:hover{
        border: 1px solid #808
      }
    }
  }
}
</style>
